<template>
  <div v-if="partListCon">
    <el-form ref="form" :model="partListCon" label-width="110px" size="small">
      <el-form-item label="是否显示">
        <el-switch class="zdySwith" :width="82" :value="partListCon.show" active-color="#13ce66" @change="updateInput($event, 'show')" inactive-color="#ffffff" active-text="显示" inactive-text="隐藏" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item label="标题"  v-if="partListCon.style != 11">
        <el-input @input="updateInput($event, 'title')" :value="partListCon.title" placeholder="请输入标题">
        </el-input>
      </el-form-item>
      <el-form-item label="副标题"  v-if="partListCon.style != 11">
        <el-input @input="updateInput($event, 'title_en')" :value="partListCon.title_en" placeholder="请输入副标题">
        </el-input>
      </el-form-item>
      <el-form-item label="展示模式">
        <el-select v-model="partListCon.style" placeholder="请选择" @change="updateInput($event, 'style')">
          <el-option v-for="(item, i) in style_option" :key="i" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="头部背景图" v-if="partListCon.style == 11">
        <uploadpic :piclink="partListCon.other || ''" width="375" height="91" :real_width="375" :real_height="91" :is_more="false" @send_pic="updateInput($event, 'other')"> </uploadpic>
      </el-form-item>
      <el-form-item label="背景图链接" v-if="partListCon.style == 11">
        <el-col :span="16">
          <el-input :value="partListCon.links" @input="updateInput($event, 'links')" class="mar-input"></el-input>
        </el-col>
        <el-col :span="6" class="mar_lf_15">
          <LinkMenu @sendRow="partGetSendRow" :index="1"></LinkMenu>
        </el-col>
      </el-form-item>
      <el-form-item label="是否显示间距">
        <el-select v-model="partListCon.text" placeholder="请选择" @change="updateInput($event, 'text')">
          <el-option label="显示" value=""></el-option>
          <el-option label="不显示" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-divider></el-divider>

      <div class="common-sjh-image-list-card" v-for="(item, i) in partListCon.banner" :key="i">
        <div class="image-card-wrap">
          <div class="image-card-move">
            <el-tooltip class="item" effect="dark" :content="i == 0 ? '第一个无法上移' : '上移'" placement="top-start">
              <i class="el-icon-top turn-up" @click="toCheckArrIndex(i, 'up')" :class="{ notTurnUp: i == 0 }"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="
                i == partListCon.banner.length - 1 ? '最后一个无法下移' : '下移'
              " placement="top-start">
              <i class="el-icon-bottom turn-down" @click="toCheckArrIndex(i, 'down')" :class="{ notTurnUp: i == partListCon.banner.length - 1 }"></i>
            </el-tooltip>
          </div>
          <div class="image-card-cell common-sjh-img-card-image-4-3">
            <div class="sjh-image-editor">
              <uploadpic :piclink="item.piclink" :width="80" :height="80" :is_tip="false" :real_width="100" :real_height="160" :is_more="false" @send_pic="set_banneritem_val($event, i, 'piclink')"></uploadpic>
            </div>
            <div class="image-input-text">
              <div class="link-detail-url">
                <el-input placeholder="请输入内容" v-model="item.title" size="mini">
                  <template slot="prepend">标题</template>
                </el-input>
              </div>
              <div class="wt-link-comp">
                <div class="wt-link-comp-content">
                  <div class="add-btn" v-if="item.links == ''">
                    <LinkMenu :index="i" @sendRow="getSendRow" style="position: absolute; z-index: 1; opacity: 0;">
                    </LinkMenu>
                    <div class="el-icon-plus"></div>
                    添加链接
                  </div>
                  <div class="link-detail-wrapper tl" v-else>
                    <div class="link-detail">
                      <div class="link-detail-url">
                        <el-input placeholder="请输入内容" v-model="item.links" size="mini">
                          <template slot="prepend">{{
                            item.introduction | ellipsis
                          }}</template>
                        </el-input>
                      </div>
                      <div class="link-detail-editor" @click="set_banneritem_val('', i, 'links')" title="删除">
                        <div class="btns">删除链接</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <i class="el-icon-close del-advertiseme" @click="del_banneritem(i, item.id)" title="删除"></i>
        </div>
      </div>

      <div class="btnAdd" @click="addpart">
        <i class="el-icon-plus"></i>
      </div>
    </el-form>
  </div>
</template>

<script>
import uploadpic from "@/components/page/pic/up_pic";
import LinkMenu from "@/components/currency/Link_menu.vue";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      activeNames: ["4"],
      style_option: [
        {
          label: "单图",
          value: "0",
        },
        {
          label: "双图",
          value: "1",
        },
        {
          label: "三图",
          value: "2",
        },
        {
          label: "四图",
          value: "6",
        },
        {
          label: "竖排1+2模式",
          value: "10",
        },
        {
          label: "横排1+2模式",
          value: "3",
        },
        {
          label: "横排1+3模式",
          value: "4",
        },
        {
          label: "横排2+3模式",
          value: "5",
        },
        {
          label: "幻灯片模式",
          value: "7",
        },
        {
          label: "横排1+4模式",
          value: "8",
        },
        {
          label: "横排2+4模式",
          value: "9",
        },
        {
          label: "带背景栏目模式",
          value: "11",
        },
        {
          label: "特殊模式",
          value: "99",
        },
      ],
      isShowTitle: false,
    };
  },

  computed: {
    ...mapState({
      active: (state) => state.modulePage.active,
      activeBnnerIndex: (state) => state.modulePage.bannerNowIndex,
      allbanner: (state) => state.modulePage.allbanner,
    }),
    partListCon() {
      if (this.activeBnnerIndex >= 0) {
        return this.allbanner[this.activeBnnerIndex];
      } else {
        return {};
      }
    },
  },
  components: {
    uploadpic,
    LinkMenu,
  },
  created() {},
  mounted() {},
  methods: {
    loadSuccess_bj(pic) {
      //上传背景图片
      this.$store.commit("setbaseedit", { label: "background", val: pic });
    },
    del_banneritem(i, id) {
      this.$store.commit("del_sonbanner_item", {
        key: this.activeBnnerIndex,
        index: i,
        id: id,
      });
    },
    set_banneritem_val(pic, i, name) {
      this.$store.commit("set_sonbanner_item", {
        key: this.activeBnnerIndex,
        name: name,
        index: i,
        val: pic,
      });
    },
    addpart() {
      this.$store.commit("addbanner_sondata", this.activeBnnerIndex);
    },
    toCheckArrIndex(i, status) {
      //排序

      var index2 = "";
      if (status == "up") {
        index2 = i - 1;
      } else {
        index2 = i + 1;
      }

      this.$store.commit("sortbanner_son", {
        key: this.activeBnnerIndex,
        index1: i,
        index2: index2,
        status: status,
      });
    },
    updateInput(val, name) {
      //  0 - 单行单图   1- 单行双图  2- 单行三图   6- 单行四图  3- 1+2模式   4- 1+3模式   5- 2+3模式
      var num = 1;
      if (name == "style") {
        if (val == 1) {
          num = 2;
        } else if (val == 2 || val == 3) {
          num = 3;
        } else if (val == 6 || val == 4) {
          num = 4;
        } else if (val == 2 || val == 5) {
          num = 5;
        }
        if (this.partListCon.banner.length < num) {
          for (var i = 0; i < num - this.partListCon.banner.length; i++) {
            console.log(i);
            this.addpart();
          }
        }
      }
      this.$store.commit("set_sonbanner_name", {
        key: this.activeBnnerIndex,
        name: name,
        val: val,
      });
    },
    //--------------------------------------------

    hideModules() {
      this.$swal({
        title: "您确定要删除这个栏目吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          this.$store.commit("delAdvertisement", this.partListCon.id);
        } else if (willDelete.dismiss == "cancel") {
          this.$swal("已取消", "您取消了删除操作", "error");
        }
      });
    },

    delAdvertisementIyem(i) {
      this.$store.commit("delAdvertisementIyem", i);
    },
    delLinks(i) {
      this.$store.commit("setpartListConConBannerItem", {
        value: "",
        key: "links",
        index: i,
      });
    },

    addAdvertisement() {
      this.$store.commit("addAdvertisement");
    },
    onChangeBanner(e, obj) {
      this.$store.commit("onChangeBanner", { value: e, key: obj.type });
    },
    partGetSendRow(row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      this.updateInput(result.links, "links");
    },
    getSendRow(row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      var obj = {};
      obj.key = this.activeBnnerIndex;

      if (result.title != "自定义链接") {
        this.$store.commit("set_sonbanner_item", {
          key: this.activeBnnerIndex,
          name: "introduction",
          index: result.index,
          val: result.desc,
        });
        this.$store.commit("set_sonbanner_item", {
          key: this.activeBnnerIndex,
          name: "links",
          index: result.index,
          val: result.links,
        });
      } else {
        this.$store.commit("set_sonbanner_item", {
          key: this.activeBnnerIndex,
          name: "introduction",
          index: result.index,
          val: "自定义链接",
        });
        this.$store.commit("set_sonbanner_item", {
          key: this.activeBnnerIndex,
          name: "links",
          index: result.index,
          val: " ",
        });
      }
    },
  },
  watch: {
    isShowTitle(val) {
      if (!val) {
        this.$store.commit("onChangeBanner", {
          value: "",
          key: "title",
        });
      }
      console.log(val);
    },
  },
};
</script>

<style scoped lang="less"></style>
